import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';
const PlaceholderImage = require('./assets/background-image.png');
import ImageViewer from "./components/ImageViewer";
import Button from "./components/Button";
import * as ImagePicker from "expo-image-picker";
import CircleButton from "./components/CircleButton";
import IconButton from "./components/IconButton";
import EmojiPicker from "./components/EmojiPicker";
import {useState,useRef} from "react";
import EmojiList from "./components/EmojiList";
import EmojiSticker from "./components/EmojiSticker";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import * as MediaLibrary from 'expo-media-library';
import { captureRef } from 'react-native-view-shot';
export default function App() {
  const [status, requestPermission] = MediaLibrary.usePermissions();
  const [pickedEmoji, setPickedEmoji] = useState([]);
  const [isModalVisible,setIsModalVisible] = useState(false);
  const [selectImage,setSelectImage] = useState(null);
  const [showAppOptions,setShowAppOptions] = useState(false);
  const imageRef = useRef();
  const onReset = () => {
    setPickedEmoji([])
    setShowAppOptions(false);
  };
  const onAddSticker = () => {
    setIsModalVisible(true);
  };
  const onModalClose = () => {
    setIsModalVisible(false);
  }
  const onSaveImageAsync = async () => {
    try {
      const localUri = await captureRef(imageRef, {
        height: 440,
        quality: 1,
      });

      await MediaLibrary.saveToLibraryAsync(localUri);
      if (localUri) {
        alert("Saved!");
      }
    } catch (e) {
      console.log(e);
    }
  };
  if (status === null) {
    requestPermission();
  }
  const pickImage = async () =>{
    setPickedEmoji([])
    let result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing:true,
      quality:1
    });
    if (!result.canceled) {
     // console.log(result)
      setSelectImage(result.assets[0].uri);
      setShowAppOptions(true);
    }else {
      console.log("You did not select any image.");
    }
  }
  return (
    <GestureHandlerRootView style={styles.container}>
      <View style={styles.imageContainer}>
        <View ref={imageRef} collapsable={false}>
        <ImageViewer placeholderImageSource={PlaceholderImage} selectImage={selectImage}/>
        {pickedEmoji.length !== 0?pickedEmoji.map((picker,index)=>{
          console.log(picker,'*')
          return <EmojiSticker imageSize={40} stickerSource={picker} key={index}/>
        }):null}
        </View>
      </View>
      {showAppOptions ? (
        <View style={styles.optionsContainer}>
          <View style={styles.optionsRow}>
            <IconButton icon="refresh" label="重置" onPress={onReset}/>
            <CircleButton onPress={onAddSticker} />
            <IconButton icon="save-alt" label="保存" onPress={onSaveImageAsync}/>
          </View>
        </View>):
        (
          <View style={styles.footerContainer}>
            <Button label="选择图片" theme="primary" onPress={pickImage}/>
            <Button label="使用这张" onPress={ () => setShowAppOptions(true)}/>
          </View>
        )
      }
      <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}>
        <EmojiList onSelect={setPickedEmoji} emojiList={pickedEmoji} onCloseModal={onModalClose}/>
      </EmojiPicker>
      <StatusBar style="auto" />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    alignItems: 'center',
    justifyContent: 'center',
  },
  footerContainer: {
    flex: 1 / 3,
    alignItems: 'center',
  },
  imageContainer: {
    flex: 1,
    paddingTop: 58,
  },
  image: {
    width: 320,
    height: 440,
    borderRadius: 18,
  },
  optionsContainer: {
    position: 'absolute',
    bottom: 80,
  },
  optionsRow: {
    alignItems: 'center',
    flexDirection: 'row',
  }
});
